<template>
  <div class="screen-container">
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :show-close="false"
      :with-header="false"
    >
      <el-row style="margin: 0.5rem">
        <el-button-group style="width:100%">
          <el-button class="cus-button" type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>
          <el-button class="cus-button" type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
        </el-button-group>
        <!-- <el-button type="primary">刷新</el-button>
        <el-button type="primary">轮播</el-button> -->
      </el-row>
      <el-divider />
      <el-row>
        <template v-for="(item, index) in list">
          <el-button :key="item.name" class="page-button" :type="isSelectPage(item)" round @click="showPage(index, item)">{{ index + 1 }}、{{ item.name }}</el-button>
        </template>
      </el-row>
    </el-drawer>
    <div class="menu-button" @click="drawer = true">
      <i class="el-icon-s-operation" />
    </div>
    <sync-page v-if="selectedPage !== null" :page="selectedPage" />
  </div>
</template>

<script>
// import store from '../../store';
import { getDisplayPageList } from "@/api/page";
import { getDisplayPageInfo } from "@/api/display";
import SyncPage from "@/views/syncpage/index";
export default {
  name: 'Screen',
  components: {
    SyncPage
  },
  data() {
    return {
      drawer: false,
      direction: 'ltr',
      list: null,
      listLoading: true,
      selectedPage: null,
      selectedPageId: null
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.listLoading = true;
      getDisplayPageInfo().then(response => {
        this.selectedPageId = response.data;
        return getDisplayPageList();
      }).then(response => {
        console.log(response);
        this.selectedPage = null;
        const cusList = response.data;
        if (this.selectedPageId == null || cusList.some(item => this.selectedPageId === item.id)) {
          this.selectedPage = cusList[0];
          this.selectedPageId = this.selectedPage.id;
          console.log(this.selectedPage);
        } else {
          this.selectedPage = cusList.filter(item => this.selectedPageId === item.id)[0];
        }
        this.list = response.data;
        this.listLoading = false;
      });
    },
    showPage(idx, item) {
      // console.log(idx);
      // console.log(item);
      this.selectedPage = null;
      this.selectedPage = item;
      this.selectedPageId = item.id;
    },
    nextPage() {
      let idx = this.list.findIndex(item => item.id === this.selectedPageId) + 1;
      if (this.list.length === idx) {
        idx = 0;
      }
      this.showPage(idx, this.list[idx]);
    },
    prePage() {
      let idx = this.list.findIndex(item => item.id === this.selectedPageId) - 1;
      if (idx < 0) {
        idx = this.list.length - 1;
      }
      this.showPage(idx, this.list[idx]);
    },
    isSelectPage(item) {
      if (item.id === this.selectedPageId) {
        return "danger";
      }
      return "primary";
    }
  }
}
</script>

<style lang="scss" scoped>
.screen {
  &-container {
    margin: 0;
  }
  &-text {
    font-size: 0.24rem;
    line-height: 0.24rem;
  }
}
.menu-button {
    position: fixed;
    z-index: 1000;
    margin-left: 1em;
    padding: 0;
    width: 2.5em;
    height: 2.25em;
    border: none;
    font-size: 1.5em;
    color: #3D3D3D;
    // color: transparent;
    // background: transparent;
}
.cus-button {
  width: 50%;
  padding-left: 5%;
  margin-bottom: 0.5rem;
}
.page-button {
  width: 100%;
  margin: 0 0 0.5rem 0;
}
</style>
